<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>leaflet.migration插件的使用</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />

  <style>
    html,
    body {
      position: relative;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    #map {
      position: relative;
      height: 100%;
      width: 100%;
    }

    #event {
      position: absolute;
      top: 50px;
      right: 600px;
      height: 100px;
      width: 400px;
      z-index: 10000;
    }

    .btn {
      border-color: gray;
      border-width: 2px;
      background-color: white;
    }

    .popover {
      position: absolute;
      /* top: 50px;
      right: 20px; */
      z-index: 999;
      background: rgba(0, 0, 0, 0.5);
      /* width: 200px;
      height: 100px; */
      min-width: 150px;
      padding: 10px;
      border-radius: 5px;
      color: #fff;
      line-height: 1.5;
      font-size: 14px;
    }
  </style>

</head>

<body>
  <div id="map"></div>
  <div class="popover"></div>

  <div id='event'>
    <input type="button" value="setData" class="btn" onclick="setData()">
    <input type="button" value="hide" class="btn" onclick="hide()">
    <input type="button" value="show" class="btn" onclick="show()">
    <input type="button" value="pause" class="btn" onclick="pause()">
    <input type="button" value="play" class="btn" onclick="play()">
    <input type="button" value="destroy" class="btn" onclick="destroy()">
  </div>

  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
  <script src='./js/leaflet.migration.min.js'></script>

  <script>
    var lrmap = L.map('map').setView([33.67, 106.06], 5);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(lrmap);

    const data = [
      {
        from: [104.06, 30.67], // 成都
        to: [116.41, 39.9], // 北京
        labels: ["成都", "北京"],
        color: "#ff3a31",
        value: 15,
      },
      {
        from: [104.06, 30.67], // 成都
        to: [121.47, 31.23], // 上海
        labels: ["成都", "上海"],
        color: "#00ff00",
        value: 15,
      },
    ];

    const popover = document.querySelector('.popover');

    const options = {
      marker: {
        radius: [5, 10],     // 点位半径，默认值[5, 10]
        pulse: true,         // 是否闪烁，默认true
        textVisible: true,   // 是否显示点位标签，默认false
      },
      line: {
        width: 1,     // 线宽，默认1
        order: false, // 是否排序，默认false
        icon: {
          type: 'arrow',  // 默认circle，取值circle、arrow、img
          imgUrl: '',
          size: 10
        },
      },
      minZoom: 3,  // 最小显示层级
      // 自定义提示信息
      // replacePopover(x, y, data, index) {
      //   console.log(x, y, data, index, 'replacePopover');
      //   popover.innerHTML = `<div>自定义popover</div>  
      //   <div>${data.labels[0]} -> ${data.labels[1]}: ${data.value}</div>`;
      //   return popover;
      // },
      // onShowPopover(data, index) {
      //   console.log(data, index, 'onShowPopover');
      // },
      // onHidePopover(data) {
      //   console.log(data, 'onHidePopover');
      // },
    };
    const migrationLayer = L.migrationLayer(data, options);
    migrationLayer.addTo(lrmap);
    // migrationLayer.setStyle({ pulse: { radius: 20 } });


    function setData() {
      migrationLayer.setData([]);
    }
    function hide() {
      migrationLayer.hide();
    }
    function show() {
      migrationLayer.show();
    }
    function play() {
      migrationLayer.play();
    }
    function pause() {
      migrationLayer.pause();
    }
    function destroy() {
      // lrmap.remove(migrationLayer);
    }
  </script>
</body>

</html>